import '../utils/touchWheel'
import { userCardStore } from '../store/userCardStore'

export const useTouchDragScale = function (element, config = {}) {
    const cardStore = userCardStore()
    let x =cardStore.editor.left
    let y = cardStore.editor.top
    let scale = cardStore.editor.scale
    const callback = e => {
        e.preventDefault()
    
        // if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) {
        //     console.log('没有固定方向')
        //     x-=e.deltaX
        //     y-=e.deltaY
        // }
        // if (e.deltaX < 0) {
        //     console.log('向右')
        //     x-=e.deltaX
        // }
        // if (e.deltaX > 0) {
        //     console.log('向左')
        //     x-=e.deltaX
        // } ;
        // if (e.ctrlKey) {
        //     if (e.deltaY > 0) return console.log('向内');
        //     if (e.deltaY < 0) return console.log('向外');
        // } else {
        //     if (e.deltaY > 0) {
        //         console.log('向上')
        //         y-=e.deltaY
        //     }
        //     if (e.deltaY < 0) {
        //         console.log('向下')
        //         y-=e.deltaY
        //     }
        // }
         if (e.ctrlKey) {
            console.log(e.deltaY)
            const deltaY = Math.abs(e.deltaY) > 10 ? e.deltaY / 70 : e.deltaY
            scale-=(deltaY/50)

            scale < 0.2 && (scale = 0.2)
            scale > 1.5 && (scale = 1.5)
            config.scaleChange && config.scaleChange(scale)
        } else {
            x-=e.deltaX
            y-=e.deltaY    
        }


        cardStore.setEditorTransform({
            left: x,
            top: y,
            scale
        })
        // target.style.transform=`translate(${x}px,${y}px)`
    
    }
   
    addWheelListener(element,callback )

    // 鼠标操作
    // 监听space按下
    let isSpaceHold = false
    const keydown = (e) => {
        isSpaceHold = e.code === 'Space'
        isSpaceHold && element.classList.add('mask')
    }
    const keyup = () => {
        isSpaceHold = false
        element.classList.remove('mask')
    }
    document.addEventListener('keydown',keydown)
    document.addEventListener('keyup',keyup)

    let startX = 0
    let startY = 0
    let endX
    let endY
    const mousemove = (e) => {
         endX= x + e.clientX - startX
         endY = y + e.clientY - startY
        cardStore.setEditorTransform({
            left: endX,
            top: endY,
            scale
        })
    }
    const mouseup = () => {
        x = endX
        y = endY
        element.removeEventListener('mousemove', mousemove)
        element.removeEventListener('mouseup', mouseup)
    }
    const mousedown = (e) => {
        if(!isSpaceHold) return
        startX = e.clientX
        startY = e.clientY
        element.addEventListener('mousemove',mousemove)
        element.addEventListener('mouseup',mouseup)
    }
    
    element.addEventListener('mousedown',mousedown)
    return {
        reset() {
            x = cardStore.editor.left
            y = cardStore.editor.top
            scale = cardStore.editor.scale
        }
    }
}
// export const useTouchDragScale = function (element) {
//     // 记录上次触发时间和位置信息
//     var lastTouchTime;
//     var startX, startY;
//     console.log(element)
//     // 添加touchstart、touchmove和touchend事件处理函数
//     element.addEventListener('touchstart', handleStart);
//     element.addEventListener('touchmove', handleMove);
//     element.addEventListener('touchend', handleEnd);
    
//     function handleStart(event) {
//         console.log(event)
//         // 判断当前触摸点数量为2（两根手指）才开始计算拖动操作
//         if (event.targetTouches.length === 2 && !lastTouchTime) {
//             var touch1 = event.targetTouches[0];
//             var touch2 = event.targetTouches[1];
            
//             // 初始化起始位置信息
//             startX = Math.abs((touch1.clientX + touch2.clientX) / 2 - window.innerWidth / 2);
//             startY = Math.abs((touch1.clientY + touch2.clientY) / 2 - window.innerHeight / 2);
            
//             // 设置最后触摸时间为当前时间
//             lastTouchTime = Date.now();
//         }
//     }
    
//     function handleMove(event) {
//         // 如果已经有两根手指并且没有结束则更新位置信息
//         if (event.targetTouches.length === 2 && lastTouchTime) {
//             var currentTime = Date.now();
//             var deltaTime = currentTime - lastTouchTime;
            
//             // 限制每秒只能移动一定距离，避免过度移动导致不流畅
//             if (deltaTime > 50) {
//                 return;
//             }
            
//             var touch1 = event.targetTouches[0];
//             var touch2 = event.targetTouches[1];
            
//             var newX = Math.abs((touch1.clientX + touch2.clientX) / 2 - window.innerWidth / 2);
//             var newY = Math.abs((touch1.clientY + touch2.clientY) / 2 - window.innerHeight / 2);
            
//             var dx = newX - startX;
//             var dy = newY - startY;
            
//             // 将元素相对于页面左边界和上边界的位置调整到合适的值
//             // element.style.left = parseInt(getComputedStyle(element).left) + dx + "px";
//             // element.style.top = parseInt(getComputedStyle(element).top) + dy + "px";
            
//             // 重新设置起始位置信息
//             startX = newX;
//             startY = newY;
            
//             // 更新最后触摸时间
//             lastTouchTime = currentTime;
//         }
//     }
    
//     function handleEnd() {
//         // 清除变量保存的状态信息
//         lastTouchTime = null;
//     }
//     return {

//     }
// }